<div>
  <form class="form-horizontal" role="form" novalidate name="myForm">
    <div class="form-ctrl md-whiteframe-z1">
      <div class="form-search" style="height:230px;" ng-class="{true: 'shou'}[shoumun.num==0]">
        <div>
          <label>状态</label>
          <md-select ng-model="sendData.stateCode" >
            <md-option ng-value="s.stateCode" ng-repeat="s in states">{{s.stateName}}</md-option>
          </md-select>
        </div>
        <div>
          <label style="width:115px">维护模式</label>
          <md-select ng-model="sendData.modeCode">
            <md-option ng-value="mode.modeCode" ng-repeat="mode in maintainModes">{{mode.modeName}}</md-option>
          </md-select>
        </div>
      </div> <i class="glyphicon glyphicon-chevron-up shrinkage" ng-show="!btnDisabled" ng-click="shoumun.num=0"></i>
      <md-button ng-disabled="btnDisabled"  ng-click="shoumun.num==1?shoumun.num=0:shoumun.num=1;search()" class="md-fab md-primary md-hue-1" aria-label="Profile"> <i class="glyphicon glyphicon-arrow-down"
      style="margin-top:28px;"  ng-show="shoumun.num==0"></i>
        <i class="glyphicon glyphicon-search" ng-show="shoumun.num==1"></i>
      </md-button>
    </div>
  </form>
  <div class="table-info">
    <div class="menus" ng-show="flag === 'state' || flag === 'process' || flag === 'resource' || flag === 'component'">
      <md-button class="md-raised" ng-click="back()" style="background-color: #FF9800;color:white">返回主机详细信息展示</md-button>
      <md-button class="md-raised" ng-click="queryState(hostInfo)" style="background-color: #FF9800;color:white">状态</md-button>
      <md-button class="md-raised" ng-click="queryProcess()" style="background-color: #FF9800;color:white" >进程</md-button>
      <md-button class="md-raised" ng-click="queryResources()" style="background-color: #FF9800;color:white">资源</md-button>
      <md-button class="md-raised" ng-click="queryComponent()" style="background-color: #FF9800;color:white" >组件</md-button>
    </div>
    <!--主机详细信息-->
    <div ng-show="flag === 'table'">
      <div class="table-detail">
        <div class="t_r">
          <table class="table table-bordered">
            <caption style="text-align:center;font-size:large;font-weight:bold;color:black">{{title}}</caption>
            <thead>
              <tr>
                <th>状态</th>
                <th>主机名称</th>
                <th>域</th>
                <th style="width:120px;">IP</th>
                <th>处理器</th>
                <th>硬盘大小</th>
                <th>CPU频率</th>
                <th style="width:120px;">磁盘使用情况</th>
                <th>物理内存</th>
                <th>版本</th>
                <th>负载分担</th>
                <th>维护模式</th>
              </tr>
            </thead>
            <tbody class="table table-bordered">
              <tr ng-repeat="item in items">
                <td>{{item.state}}</td>
                <td>{{item.hostName}}</td>
                <td>{{item.region}}</td>
                <td style="width:120px;">{{item.ipAdd}}</td>
                <td>{{item.cpu}}</td>
                <td>{{item.disk}}</td>
                <td>{{item.cpuRate}}</td>
                <td>{{item.diskRate}}</td>
                <td>{{item.ramRate}}</td>
                <td>{{item.version}}</td>
                <td>{{item.loadGroup}}</td>
                <td>{{item.repair}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!--状态-->
    <div ng-show="flag === 'state'">
      <form>
        <table  class="table table-striped table-bordered" style="width:100%;">
          <tr>
            <td>
              主机名称:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{hostInfo.hostName}}
            </td>
            <td>IP:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{hostInfo.ipAdd}}</td>
          </tr>
          <tr>
            <td>版本:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{hostInfo.version}}</td>
            <td>处理器:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{hostInfo.cpu}}</td>
          </tr>
          <tr>
            <td>
              负载分组:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{hostInfo.loadGroup}}
            </td>
            <td>维护模式:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{hostInfo.repair}}</td>
          </tr>
          <tr>
            <td colspan="2">硬盘:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{hostInfo.disk}}</td>
          </tr>
          <tr>
            <td colspan="2">内存:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{hostInfo.ramRate}}</td>
          </tr>
        </table>
        <div>
          <md-button class="md-raised" ng-click="show()" style="background-color: #FF9800;color:white">显示运行状况</md-button>
          <div ng-show="false"  id="slider" style="width: 100%;height: 122px;overflow-y: scroll;border:1px solid #000;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" id="myTab">
              <tr  ng-repeat="run in runMessage">
                <td class="diffcount-td" >
                  <div style="padding:0 0 0 15px;">
                    <div style="width:135px;height:10px;float:left">{{run.time}}</div>
                    <div style="width:105px;height:10px;float:left">{{run.runState}}</div>
                    <div style="width:105px;height:10px;float:left">{{run.state}}</div>
                    <a ng-click="show(run)">{{run.other}}</a>
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <div></div>
        </div>
      </form>
      <div id="doc" class="left" style="height:210px;width:614px;"></div>
      <div id="doc1" class="right" style="height:210px;width:614px;"></div>
      <div id="doc2" class="left" style="height:210px;width:614px;"></div>
      <div id="doc3" class="right" style="height:210px;width:614px;"></div>
    </div>
    <!--进程-->
    <div ng-show="flag === 'process'">
      <div class="table-detail">
        <div class="t_r">
          <table class="table table-bordered">
            <caption style="text-align:center;font-size:large;font-weight:bold;color:black">{{title}}</caption>
            <thead>
              <tr>
                <th>映象名称</th>
                <th>用户名</th>
                <th>进程状态</th>
                <th>CPU</th>
                <th>内存</th>
                <th>运行时间(小时)</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody class="table table-bordered">
              <tr ng-repeat="item in processData">
                <td>{{item.mirrorName}}</td>
                <td>{{item.username}}</td>
                <td>{{item.runState}}</td>
                <td>{{item.cpu}}</td>
                <td>{{item.ram}}</td>
                <td>{{item.runTime}}</td>
                <td>{{item.description}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!--资源-->
    <div ng-show="flag === 'resource'">
      <div class="table-detail">
        <div class="t_r">
          <table class="table table-bordered">
            <thead>
              <tr>
                <td colspan="4" style="text-align:left">CPU</td>
              </tr>
              <tr>
                <th>服务</th>
                <th>线程数</th>
                <th>状态</th>
                <th>大概CPU</th>
              </tr>
            </thead>
            <tbody class="table table-bordered">
              <tr ng-repeat="item in resources.cpuData">
                <td ng-click="cpuServerDown()">{{item.server}}</td>
                <td>{{item.thread}}</td>
                <td>{{item.state}}</td>
                <td>{{item.cpu}}</td>
              </tr>
            </tbody>
          </table>
          <table class="table table-bordered">
            <thead>
              <tr>
                <td colspan="4" style="text-align:left">内存</td>
              </tr>
              <tr>
                <th>服务</th>
                <th>PID</th>
                <th>状态</th>
                <th>字节</th>
              </tr>
            </thead>
            <tbody class="table table-bordered">
              <tr ng-repeat="item in resources.ramData">
                <td ng-click="ramServerDown()">{{item.server}}</td>
                <td>{{item.PID}}</td>
                <td>{{item.state}}</td>
                <td>{{item.resourceByte}}</td>
              </tr>
            </tbody>
          </table>
          <table class="table table-bordered">
            <thead>
              <tr>
                <td colspan="4" style="text-align:left">磁盘</td>
              </tr>
              <tr>
                <th>服务</th>
                <th>PID</th>
                <th>状态</th>
                <th>路径</th>
              </tr>
            </thead>
            <tbody class="table table-bordered">
              <tr ng-repeat="item in resources.diskData">
                <td ng-click="diskServerDown()">{{item.server}}</td>
                <td>{{item.PID}}</td>
                <td>{{item.state}}</td>
                <td>{{item.url}}</td>
              </tr>
            </tbody>
          </table>
          <table class="table table-bordered">
            <thead>
              <tr>
                <td colspan="4" style="text-align:left">网络</td>
              </tr>
              <tr>
                <th>服务</th>
                <th>PID</th>
                <th>状态</th>
                <th>字节</th>
              </tr>
            </thead>
            <tbody class="table table-bordered">
              <tr ng-repeat="item in resources.interData">
                <td ng-click="interServerDown()">{{item.server}}</td>
                <td>{{item.PID}}</td>
                <td>{{item.state}}</td>
                <td>{{item.resourceByte}}</td>
              </tr>
            </tbody>
          </table>
          <table class="table table-bordered">
            <thead>
              <tr>
                <td colspan="4" style="text-align:left">端口</td>
              </tr>
              <tr>
                <th>服务</th>
                <th>状态</th>
                <th>端口</th>
                <th>说明</th>
              </tr>
            </thead>
            <tbody class="table table-bordered">
              <tr ng-repeat="item in resources.portData">
                <td>{{item.server}}</td>
                <td>{{item.state}}</td>
                <td>{{item.port}}</td>
                <td>{{item.desc}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!--组件-->
    <div ng-show="flag === 'component'">
      <div class="table-detail">
        <div class="t_r">
          <table class="table table-bordered">
            <caption style="text-align:center;font-size:large;font-weight:bold;color:black">{{title}}</caption>
            <thead>
              <tr>
                <th>组件名称</th>
                <th>组件类型</th>
                <th>运行状态</th>
                <th>运行时间</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody class="table table-bordered">
              <tr ng-repeat="item in components">
                <td>{{item.componentName}}</td>
                <td>{{item.componentType}}</td>
                <td>{{item.runState}}</td>
                <td>{{item.runTime}}</td>
                <td>{{item.description}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!--状态cpu下钻-->
    <div ng-show="flag === 'cpuDown'">
      <div class="menus">
        <md-button ng-click="stateBack()" class="md-raised ico-btn">返回</md-button>
      </div>
      <div>
        <div id="doc10" style="height:450px;"></div>
      </div>
    </div>
    <!--状态磁盘下钻-->
    <div ng-show="flag === 'diskDown'">
      <div class="menus">
        <md-button ng-click="stateBack()" class="md-raised ico-btn">返回</md-button>
      </div>
      <div>
        <div id="doc4" class="left" style="height:210px;width:614px;"></div>
        <div id="doc5" class="right" style="height:210px;width:614px;"></div>
        <div id="doc6" class="left" style="height:210px;width:614px;"></div>
      </div>
    </div>
    <!--状态内存下钻-->
    <div ng-show="flag === 'ramDown'">
      <div class="menus">
        <md-button ng-click="stateBack()" class="md-raised ico-btn">返回</md-button>
      </div>
      <div>
        <div id="doc7" style="height:450px;"></div>
      </div>
    </div>
    <!--状态网络下钻-->
    <div ng-show="flag === 'interDown'">
      <div class="menus">
        <md-button ng-click="stateBack()" class="md-raised ico-btn">返回</md-button>
      </div>
      <div>
        <div id="doc8" class="left" style="height:310px;width:614px;"></div>
        <div id="doc9" class="right" style="height:310px;width:614px;"></div>
      </div>
    </div>
    <!---->
    <div ng-show="flag === 'resourcesDown'">
      <div class="menus">
        <md-button ng-click="resourceBack()" class="md-raised ico-btn">返回</md-button>
      </div>
      <div>
        <div id="doc11" style="height:450px;"></div>
      </div>
    </div>
  </div>
</div>